{% extends 'users/usercenter-base.html' %}
{% load staticfiles %}
{% block title %}个人中心 - 哆唻咪启蒙乐园{% endblock %}

{% block custom_content %}
    <section class="page-title center">
        <div class="container">
            <h2>个人中心</h2>
            <ul>
                <li><a href="{% url 'main:index' %}">主页</a></li>
                <li><a href="{% url 'users:user_info' %}">个人中心</a></li>
            </ul>
        </div>
    </section>
    <section class="user-info">
        <div class="row">
            <div class="col-md-6 col-md-offset-3 col-sm-12">
                <div class="user-box" id="userForm">

                    <form class="user-form" id="user-form">
                        <div class="row clearfix">
                            <div class="form-group" id="contact-alert" style="visibility:hidden;">
                                <div class="alert alert-success" role="alert"></div>
                            </div>
                            <span>用户名 :</span>
                            <h4>{{ request.user.username }}</h4>

                            <span>性别 :</span>
                            <div class="form-group user-info-gender">
                                {% if request.user.gender == 'male' %}
                                    <input id="male" type="radio" value="1" checked="checked" name="gender"/>男
                                    <input id="female" type="radio" value="2" name="gender"/>女
                                {% else %}
                                    <input id="male" type="radio" value="1" name="gender"/>男
                                    <input id="female" type="radio" value="2" checked='checked' name="gender"/>女
                                {% endif %}
                            </div>
                            <span>手机号 :</span>
                            <div class="form-group user-info-moblie">
                                <input type="text" id="phone" name="phone" value="{{ request.user.mobile }}">
                            </div>
                            <span>邮箱 :</span>
                            <div class="form-group user-info-mail">
                                <input type="text" id="email" name="email" value="{{ request.user.email }}">
                            </div>
                            <span>收货地址 :</span>
                            <div class="form-group user-info-address">
                                <textarea type="text" id="address" name="address">{{ request.user.address }}</textarea>
                            </div>
                            <div class="form-group col-lg-12 center">
                                <button type="button" name="user-info-submit" id='user-info-update'
                                        class="btn-style-one center">更新
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
{% block custom_js %}
    <script>
        $('#user-info-update').click(function () {
            gender = $('#female').val();
            address = $('#address').val();
            phone = $('#phone').val();
            email = $('#email').val();

            console.log(gender)

            if (gender && address && phone && email) {
                $.post('/user/info/', {
                        'gender': gender,
                        'address': address,
                        'phone': phone,
                        'email': email
                    }, function (data) {
                        alert(data['message'])
                    }, 'json'
                )
            }

        });

    </script>
{% endblock %}

